<template>
    <div>
    <ul>
        <li v-for="detail in details" :key="detail.id">
            <!-- to的字符串写法 -->
            <!-- <router-link :to="`/home/message/detail?id=${detail.id}&title=${detail.title}`">{{ detail.title }}</router-link>&nbsp;&nbsp; -->
             <!-- 使用路由名字简化 -->

            <router-link :to="{ name: 'detail', query: { id: detail.id, title: detail.title } }">{{ detail.title }}</router-link>&nbsp;&nbsp;
            <!-- to的对象写法 -->

            <!-- <router-link :to="{ 
                path: '/home/message/detail', 
                name: 'detail', 
                query: { id: detail.id, title: detail.title } }
                ">
                {{ detail.title }}
            </router-link> -->
            &nbsp;&nbsp;
        </li>
    </ul>
    <hr>
    <router-view></router-view>
</div>
</template>

<script>
export default {
name: 'MessageTest',
data(){
    return {
        details:[{
            id:'001',
            title:'message001',
        },
        {
            id:'002',
            title:'message002',
        },
        {
            id:'003',
            title:'message003',
        },
    ]
    }
}
}
</script>

<style>

</style>